<template>
  <div :class="[isDark?'ca-signIn dark':'ca-signIn']">
    <div class="ca-signIn__main">
      <div :class="[signIn?'ca-signIn__main--switch':'ca-signIn__main--switch ca-signUp']">
        <div class="ca-switch-card">
          <template v-if="signIn">
            <h2 class="ca-switch-card__title">Welcome Back !</h2>
            <p class="ca-switch-card__description">Enter your personal details and start journey with us</p>
            <el-button :dark="isDark"
                       color="#626aef"
                       class="ca-switch-card__btn"
                       size="large"
                       @click="handleFormChange">
              SIGN IN
            </el-button>
          </template>
          <template v-else>
            <h2 class="ca-switch-card__title">Hello Friend !</h2>
            <p class="ca-switch-card__description">To keep connected with us please login with your personal info</p>
            <el-button :dark="isDark"
                       color="#626aef"
                       class="ca-switch-card__btn"
                       size="large"
                       @click="handleFormChange">
              SIGN UP
            </el-button>
          </template>
        </div>
        <div
            :class="[signIn ?'ca-decoration-circle ca-decoration-circle--top':'ca-decoration-circle ca-decoration-circle--top ca-signUp']"></div>
        <div
            :class="[signIn ?'ca-decoration-circle ca-decoration-circle--bottom':'ca-decoration-circle ca-decoration-circle--bottom ca-signUp']"></div>
      </div>
      <div :class="[signIn?'ca-signIn__main--form':'ca-signIn__main--form ca-signUp']">
        <div class="ca-form-card">
          <template v-if="!signUp">
            <div class="ca-form-card__title">Create Account</div>
            <div class="ca-form-card__icon">
              <el-icon size="24">
                <Message/>
              </el-icon>
              <el-icon size="24">
                <Comment/>
              </el-icon>
              <el-icon size="24">
                <SwitchFilled/>
              </el-icon>
            </div>
            <div class="ca-form-card__description">or use email for registration</div>
            <div class="ca-form-card__form">
              <el-form :model="form" label-width="auto" style="max-width: 600px">
                <el-form-item label-width="0">
                  <el-input placeholder="Username" v-model="form.username"/>
                </el-form-item>
                <el-form-item label-width="0">
                  <el-input placeholder="Email" v-model="form.email"/>
                </el-form-item>
                <el-form-item label-width="0">
                  <el-input placeholder="Password" v-model="form.password"/>
                </el-form-item>
              </el-form>
            </div>
            <el-button :dark="isDark"
                       color="#626aef"
                       size="large"
                       class="ca-form-card__btn">{{ t('signUp.signUp') }}
            </el-button>
          </template>
          <template v-else>
            <div class="ca-form-card__title">Sign in to Website</div>
            <div class="ca-form-card__icon">
              <el-icon size="24">
                <Message/>
              </el-icon>
              <el-icon size="24">
                <Comment/>
              </el-icon>
              <el-icon size="24">
                <SwitchFilled/>
              </el-icon>
            </div>
            <div class="ca-form-card__description">or use your email account</div>
            <div class="ca-form-card__form">
              <el-form :model="form" label-width="auto" style="max-width: 600px">
                <el-form-item label-width="0">
                  <el-input placeholder="Email" v-model="form.email"/>
                </el-form-item>
                <el-form-item label-width="0">
                  <el-input placeholder="Password" v-model="form.password"/>
                </el-form-item>
              </el-form>
            </div>
            <a class="ca-form-card__link">Forgot your password?</a>
            <el-button
                @click="handleSignInBtnClick"
                :dark="isDark"
                color="#626aef"
                size="large"
                class="ca-form-card__btn">{{ t('signIn.signIn') }}
            </el-button>
          </template>
        </div>
      </div>
    </div>
    <div class="ca-signIn__halo ca-signIn__halo--purple">
      <img :src="purpleHalo">
    </div>
    <div class="ca-signIn__halo ca-signIn__halo--blue">
      <img :src="blueHalo">
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref} from "vue";
import {Message, Comment, SwitchFilled} from '@element-plus/icons-vue'
import {login} from "@/utils/api/user.ts";
import {storeToRefs} from 'pinia';
import {useThemeStore} from '@/store';
import router from "@/router";
import {useI18n} from 'vue-i18n';

const {t} = useI18n();
const purpleHalo = new URL('@/assets/images/purpleHalo.svg', import.meta.url).href;
const blueHalo = new URL('@/assets/images/blueHalo.svg', import.meta.url).href;
const signIn = ref<boolean>(true);
const signUp = ref<boolean>(false);
const form = ref({username: '', email: '', password: ''});
const themeStore = useThemeStore();
const {isDark} = storeToRefs(themeStore);

const handleFormChange = () => {
  signIn.value = !signIn.value;
  setTimeout(() => signUp.value = !signUp.value, 500)
}
const handleSignInBtnClick = () => {
  login(form.value).then(res => {
    console.log(res)
    router.push({name: 'caHome'})
  });
}
</script>


<style scoped lang="scss">

@include block(signIn) {
  background-image: url("@/assets/images/home-bg.jpg");
  background-position: center;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  @include elem(main) {
    position: relative;
    width: 1000px;
    height: 600px;
    border-radius: 20px;
    box-shadow: 10px 10px 10px #d1d9e6, -10px -10px 10px #f9f9f9;
    border: none;
    display: flex;

    @include mod(switch) {
      position: absolute;
      z-index: 3;
      overflow: hidden;
      background: #ecf0f3;
      width: 35%;
      height: 100%;
      transition: margin-left 1s ease-in-out;
      border-radius: 20px 0 0 20px;
      box-shadow: 4px 4px 10px #d1d9e6, -4px -4px 10px #f9f9f9;
      display: flex;
      flex-direction: column;
      justify-content: center;

      &.ca-signUp {
        margin-left: 65%;
        border-radius: 0 20px 20px 0;
        animation: 1s linear 0s sliding;
      }

      @keyframes sliding {
        0% {
          width: 35%;
        }
        50% {
          width: 50%;
        }
        94% {
          width: 35%;
        }
      }

      .ca-decoration-circle {
        position: absolute;
        border-radius: 50%;
        background-color: #ecf0f3;
        box-shadow: inset 8px 8px 12px #d1d9e6, inset -8px -8px 12px #f9f9f9;
        bottom: -60%;
        left: -60%;
        transition: 1.25s;
      }

      .ca-decoration-circle--top {
        top: -30%;
        width: 300px;
        height: 300px;
      }
      .ca-decoration-circle--top.ca-signUp {
        left: 10%;
      }

      .ca-decoration-circle--bottom {
        width: 500px;
        height: 500px;
      }
      .ca-decoration-circle--bottom.ca-signUp {
        left: 10%;
      }
    }

    @include mod(form) {
      width: 65%;
      height: 100%;
      margin-left: 35%;
      border-radius: 0 20px 20px 0;
      transition: margin-left 1s ease-in-out;
      display: flex;
      justify-content: center;
      align-items: center;

      &.ca-signUp {
        margin-left: 0;
        border-radius: 20px 0 0 20px;
      }
    }
  }
  @include elem(halo) {
    display: none;
  }
}

@include block(switch-card) {
  display: flex;
  height: 200px;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  @include elem(title) {
    margin: 0;
    font-size: 34px;
    font-weight: 700;
    color: #181818;
  }
  @include elem(description) {
    font-size: 14px;
    letter-spacing: 0.25px;
    text-align: center;
    color: #a0a5a8;
    line-height: 1.6;
    width: 300px;
  }
  @include elem(btn) {
    width: 100px;
  }
}

@include block(form-card) {
  width: 400px;
  height: 450px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  @include elem(title) {
    font-size: 34px;
    font-weight: 700;
    color: #181818;
  }
  @include elem(icon) {
    display: flex;
    gap: 12px;
    margin: 20px 0;
    .ca-icon {
      position: static;
    }
  }
  @include elem(description) {
    width: 80%;
    margin: 0 auto;
    text-align: center;
    color: #a0a5a8;
    font-size: 12px;
    margin-bottom: 12px;
  }
  @include elem(form) {
    .ca-input {
      position: static;
      width: 350px;
      height: 40px;
      margin: 4px 0;
      font-size: 13px;
      letter-spacing: 0.15px;
      border: none;
      outline: none;
      transition: 0.25s ease;
      border-radius: 8px;
      box-shadow: inset 2px 2px 4px #d1d9e6, inset -2px -2px 4px #f9f9f9;

      :deep(.ca-input__wrapper) {
        padding: 1px 24px;
        background-color: transparent;
        border-radius: 8px;
      }

      :deep(.ca-input__wrapper.is-focus) {
        box-shadow: inset 4px 4px 4px #d1d9e6, inset -4px -4px 4px #f9f9f9;
      }
    }
  }
  @include elem(link) {
    color: #181818;
    font-size: 15px;
    margin-bottom: 18px;
    border-bottom: 1px solid #a0a5a8;
  }
}

.ca-signIn.dark {
  position: relative;
  overflow: hidden;
  background-image: none;
  background: rgb(21, 25, 52);

  .ca-signIn__main {
    background: #040538;
    box-shadow: 10px 10px 10px #4b73b4, -10px -10px 10px #746ec9;

    .ca-signIn__main--switch {
      background: #040538;
      box-shadow: 4px 4px 10px #4b73b4, -4px -4px 10px #746ec9;

      .ca-decoration-circle {
        background-color: #10153d;
        box-shadow: inset 8px 8px 12px #4b73b4, inset -8px -8px 12px #746ec9;
      }
    }
  }

  .ca-signIn__halo {
    pointer-events: none;
    position: absolute;
    display: block;
  }

  .ca-signIn__halo--blue {
    right: -260px;
  }

  .ca-signIn__halo--purple {
    left: -150px;
  }

  @include block(switch-card) {
    @include elem(title) {
      color: white;
    }
    @include elem(description) {
      color: #a0a5a8;
    }
    @include elem(btn) {
      width: 100px;
    }
  }

  @include block(form-card) {
    @include elem(title) {
      color: white;
    }
    @include elem(icon) {
      color: white;
    }
    @include elem(description) {
      color: #a0a5a8;
    }
    @include elem(form) {
      .ca-input {
        box-shadow: inset 2px 2px 4px #455d83, inset -2px -2px 4px #2f4455;

        :deep(.ca-input__wrapper) {
          box-shadow: none;

          .ca-input__inner {
            color: white;
          }
        }

        :deep(.ca-input__wrapper.is-focus) {
          box-shadow: inset 4px 4px 4px #455d83, inset -4px -4px 4px #2f4455;
        }
      }
    }
    @include elem(link) {
      color: white;
      border-bottom: 1px solid #a0a5a8;
    }
  }
}
</style>